<template>
    <div class="warp-2 body-content" style="height: 100%;">
        <!--公告-->
        <navbar :title="$t('announce_title')">
            <template #right>
                <router-link tag="a" class="icon iconfont icon-sousuo" to="/search"></router-link>
            </template>
        </navbar>
        <div class="content-noBottom" :class="{'height-100' : total === 0}">
            <div style="height: calc(100% - 47px);" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getFreshAnnounce"
                    style="padding-bottom: 56px;"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <div class="white-bg" style="padding: 15px;" v-show="total > 0">{{ total > 1 ? $t("announce_num_2", {'value': total}) : $t("announce_num", {'value': total}) }}</div><!--条公告信息-->
                            <router-link tag="div" :to="`/announceDetail/${item.msgId}`" class="announce-content white-bg" :class="{'cur' : item.isRead === 0}" v-for="(item,index) in announceList" :key="index">
                                <div class="announce-content-img">
                                    <div v-show="item.isRead === 1"></div>
                                </div>
                                <div class="announce-content-body">
                                    <div class="word-clamp-2 title">{{item.msgTitle}}</div>
                                    <div v-html="$xss(htmlFilter(item.msgBody))"></div>
                                    <div>{{ (item.msgBeginDate)}}</div>
                                </div>
                            </router-link>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
let that;
export default {
    name: 'Announce',
    components: {CommonLoading},
    data() {
        return {
            onFetching: false,
            pageNo: 1,
            pageSize: 8,
            isTop: false,
            announceList: [],
            total: 0,
            maxPageNo: 0,
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshAnnounce('refresh');
                this.isRefresh = false;
            }, 900);
        },
        //获取新的公告信息
        getFreshAnnounce(option) {
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/announce/list/0`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.announceList = res.data.results;
                    } else {
                        this.announceList = this.announceList.concat(res.data.results);
                    }
                } else {
                    if (option && option === 'refresh') {
                        this.announceList = res.data.results;
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.announceList.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    beforeCreate() {
        that = this;
    },
    mounted() {
        this.getFreshAnnounce();
    }
};
</script>

<style scoped lang="less">
</style>
